/** element内置黑暗主题 */
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;

/** 自定义黑暗主题 */
html.dark {
  aside {
    background-color: #000;
  }

  // * admin
  --qf-bg-color: #141414;
  --qf-main-bg-color: #0d0d0d;
  --qf-border-light: 1px solid #4c4c4d;

  .loginContainer {
    background-color: var(--el-fill-color-extra-light) !important;

    .loginBox {
      background-color: var(--el-mask-color) !important;
    }
  }

  .el-menu,
  .el-sub-menu,
  .el-menu-item,
  .el-sub-menu__title {
    background-color: var(--qf-bg-color) !important;

    &:not(.is-active) {
      color: #bdbdc0 !important;
    }

    &.is-active {
      color: #fff !important;
      background-color: #000 !important;
    }
  }

  .tools .left,
  .tools .right,
  .tabs,
  .qfBox .qfFilterBox,
  .qfBox .qfTableBox {
    color: #fff;
    background-color: var(--qf-bg-color);
  }

  .layout main footer {
    color: #fff;
    border: 1px solid #000;
    background-color: var(--qf-bg-color);
  }
  .layout main {
    background-color: #000;
  }
  .loginContainer .loginBox .formBox,
  .loginContainer .loginBox .formBox .tips {
    background: #272727;
  }
}
